<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇大作战 - 本地PVP模式</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.7.2/font/bootstrap-icons.css" rel="stylesheet">
    <style>
        body {
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
            color: #fff;
            font-family: 'Arial', sans-serif;
            margin: 0;
            padding: 0;
            min-height: 100vh;
        }
        
        .game-container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .game-header {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 15px;
            padding: 20px;
            margin-bottom: 20px;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .score-display {
            font-size: 1.5rem;
            font-weight: bold;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .player1-score { color: #4facfe; }
        .player2-score { color: #ff6b6b; }
        
        .timer {
            font-size: 2rem;
            font-weight: bold;
            color: #ffd700;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        
        .game-canvas-container {
            position: relative;
            margin: 0 auto;
            width: 800px;
            height: 600px;
            border-radius: 10px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
            border: 3px solid rgba(255, 255, 255, 0.3);
        }
        
        #gameCanvas {
            display: block;
            background: #1a1a2e;
        }
        
        .controls {
            margin-top: 20px;
            text-align: center;
        }
        
        .btn {
            margin: 5px;
            padding: 10px 20px;
            font-size: 1.1rem;
            border-radius: 25px;
            border: none;
            transition: all 0.3s ease;
            font-weight: bold;
        }
        
        .btn-primary {
            background: linear-gradient(45deg, #4facfe, #00a8ff);
            color: white;
        }
        
        .btn-warning {
            background: linear-gradient(45deg, #ff6b6b, #ff3838);
            color: white;
        }
        
        .btn-success {
            background: linear-gradient(45deg, #4cd964, #34e89e);
            color: white;
        }
        
        .btn:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.8);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            z-index: 1000;
            border-radius: 10px;
        }
        
        .overlay-content {
            background: rgba(255, 255, 255, 0.1);
            padding: 40px;
            border-radius: 20px;
            text-align: center;
            backdrop-filter: blur(10px);
            border: 1px solid rgba(255, 255, 255, 0.2);
            max-width: 500px;
        }
        
        .hidden {
            display: none !important;
        }
        
        .control-info {
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 15px;
            margin-top: 20px;
            backdrop-filter: blur(10px);
        }
        
        .control-item {
            display: flex;
            align-items: center;
            margin: 10px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
        }
        
        .player-color {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            margin-right: 15px;
        }
        
        .player1-color { background: #4facfe; }
        .player2-color { background: #ff6b6b; }
        
        .stat {
            display: flex;
            justify-content: space-between;
            margin: 10px 0;
            padding: 10px;
            background: rgba(255, 255, 255, 0.05);
            border-radius: 8px;
        }
        
        .food-info {
            display: flex;
            align-items: center;
            margin: 5px 0;
        }
        
        .food-color {
            width: 15px;
            height: 15px;
            margin-right: 10px;
            border-radius: 3px;
        }
        
        .normal-food { background: #ffd700; }
        .golden-food { background: #ff6b6b; }
        .moving-food { background: #9b59b6; }
    </style>
</head>
<body>
    <div class="game-container">
        <!-- 游戏头部 -->
        <div class="game-header">
            <div class="row align-items-center">
                <div class="col-md-4">
                    <div class="score-display player1-score">
                        <i class="bi bi-controller"></i> 玩家1 (WASD): <span id="player1-score">0</span>
                    </div>
                </div>
                <div class="col-md-4 text-center">
                    <div class="timer">
                        <i class="bi bi-clock"></i> <span id="timer">02:00</span>
                    </div>
                </div>
                <div class="col-md-4 text-end">
                    <div class="score-display player2-score">
                        <i class="bi bi-controller"></i> 玩家2 (方向键): <span id="player2-score">0</span>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 游戏画布 -->
        <div class="game-canvas-container">
            <canvas id="gameCanvas" width="800" height="600"></canvas>
            
            <!-- 开始界面 -->
            <div id="gameOverlay" class="overlay">
                <div class="overlay-content">
                    <h1 class="mb-4">🐍 贪吃蛇大作战</h1>
                    <h3 class="mb-4">本地PVP模式</h3>
                    <button id="startBtn" class="btn btn-primary btn-lg">
                        <i class="bi bi-play-fill"></i> 开始游戏
                    </button>
                    
                    <div class="control-info mt-4">
                        <h5>游戏控制</h5>
                        <div class="control-item">
                            <div class="player-color player1-color"></div>
                            <div>
                                <strong>玩家1 (蓝色)</strong><br>
                                WASD 控制移动
                            </div>
                        </div>
                        <div class="control-item">
                            <div class="player-color player2-color"></div>
                            <div>
                                <strong>玩家2 (红色)</strong><br>
                                方向键 控制移动
                            </div>
                        </div>
                        <div class="control-item">
                            <div style="width: 20px; height: 20px; margin-right: 15px;"></div>
                            <div>
                                <strong>空格键</strong><br>
                                按住加速移动
                            </div>
                        </div>
                    </div>
                    
                    <div class="control-info mt-3">
                        <h5>食物类型</h5>
                        <div class="food-info">
                            <div class="food-color normal-food"></div>
                            <span>普通食物 (+1分)</span>
                        </div>
                        <div class="food-info">
                            <div class="food-color golden-food"></div>
                            <span>金色食物 (+5分)</span>
                        </div>
                        <div class="food-info">
                            <div class="food-color moving-food"></div>
                            <span>移动食物 (+3分)</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 游戏结果界面 -->
            <div id="gameResult" class="overlay hidden">
                <div class="overlay-content">
                    <h1 class="mb-4">🎮 游戏结束</h1>
                    
                    <div class="stat">
                        <span>玩家1得分:</span>
                        <span id="finalPlayer1Score" class="player1-score">0</span>
                    </div>
                    
                    <div class="stat">
                        <span>玩家2得分:</span>
                        <span id="finalPlayer2Score" class="player2-score">0</span>
                    </div>
                    
                    <div class="stat">
                        <span>游戏时长:</span>
                        <span id="gameDuration">00:00</span>
                    </div>
                    
                    <div class="stat">
                        <span>获胜者:</span>
                        <span id="winner" style="color: #ffd700;">平局</span>
                    </div>
                    
                    <div class="stat">
                        <span>结束原因:</span>
                        <span id="gameEndReason" style="color: #ff6b6b;">时间到</span>
                    </div>
                    
                    <div class="mt-4">
                        <button id="playAgainBtn" class="btn btn-success">
                            <i class="bi bi-arrow-repeat"></i> 再来一局
                        </button>
                        <button id="backToMenuBtn" class="btn btn-primary">
                            <i class="bi bi-house"></i> 返回主菜单
                        </button>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 控制按钮 -->
        <div class="controls">
            <button id="pauseBtn" class="btn btn-warning">
                <i class="bi bi-pause-fill"></i> 暂停
            </button>
            <button id="restartBtn" class="btn btn-primary">
                <i class="bi bi-arrow-repeat"></i> 重新开始
            </button>
            <button id="backBtn" class="btn btn-secondary">
                <i class="bi bi-arrow-left"></i> 返回
            </button>
        </div>
        
        <!-- 游戏说明 -->
        <div class="control-info mt-4">
            <h5>游戏规则</h5>
            <ul>
                <li>控制你的蛇吃掉食物获得分数</li>
                <li>撞到墙壁、自己或对方蛇身会导致死亡</li>
                <li><strong>任意一方死亡游戏立即结束</strong></li>
                <li>2分钟时间限制，时间到游戏结束</li>
                <li>分数高者获胜，分数相同则为平局</li>
            </ul>
        </div>
    </div>
    
    <script src="js/local-pvp-fixed.js"></script>
</body>
</html>